﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<style>
body {
    min-width: 320px;
}

/*
img {
    width: 100%;
    height: 100%;
}*/

/*slide*/
.swipe {
    overflow: hidden;
    /*visibility: hidden;*/
    position: relative;
}

.swipe-wrap {
    overflow: hidden;
    position: relative;
    height: 210px
}

.swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
}

.swipe-wrap > div {
    overflow: hidden;
    position: relative;
}

.swipe-wrap img {
    width: 100%;
    height: 210px;
}

#slide {
    margin: 0 auto;
    position: relative;
}

.lable {
    background-image: -webkit-linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
    background-image: linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    display: block;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#pointer {
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    width: 92%;
    text-align: right;
}

#pointer div {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 3px;
    margin-right: 4px;
    background-color: #9B9B9B;
    margin-bottom: 1.5px;
}

#pointer div.active {
    width: 6px;
    height: 6px;
    background-color: #000000;
    margin-bottom: 0;
}

/*list列表*/
.content li {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
    position: relative;
}

.tab-content li {
    margin: 10px 5px;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #DBDBDB;
}

.item, .text {
    display: -webkit-box;
}

.img {
    width: 80px;
    height: 60px;
}

img {
    width: 100%;
    display: block;
}

.text {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    margin: 0 5px;

    overflow: hidden;
}

.subTitle {
    color: gray;
    font-size: 12px;
    line-height: 16px;
    margin-left: 3px;
    overflow: hidden;
}

.title {
    line-height:18px;
}

.newsTips, .img-lable-newsTips {
    padding:0 2px;
    height: 13px;
    position: absolute;
    right: 10px;
    bottom: 1.5px;
    font-size: 12px;
    line-height: 15px;
    color: gray;
    float: right;
    margin-top: 2px;
    border: 1px solid;
    border-radius:20px;
    text-align: center;
}

/*list列表*/
/*imgs*/
.img-lable, .after-img-lable, .after-slider-img-lable {
    position: relative;
    padding: 10px;
}

.after-img-lable, .after-slider-img-lable {
    line-height: 17px;
    font-size: 13px;
}

.after-img-lable {
    height: 34px;
    border-bottom: 1px solid #D8D8D8;
}

.after-slider-img-lable {
    padding: 5px 10px 0 10px;
}

.img-lable-newsTips {
    right: 12px;
    bottom: 5px;
}

.fortag {
    right: 50px;
}

.tag {
    width: 30px;
    border-radius: 0;
}

.blue-tag {
    color: #002ADA;
}

.imgs {
    display: -webkit-box;
    width: 100%;
    padding-bottom: 3px;
    border-bottom: 1px solid #D8D8D8;
}

.imgs li {
    width: 30%;
    /* height: 55px;*/
}

.imgs li:not(:last-child) {
    border-right: 1px solid #EDEDEB;
    margin-right: 1.5%;
}

.imgs li:last-child {
    margin-right: 10px;
}

.imgs li:first-child {
    margin-left: 10px;
}

/*imgs*/
/*毛玻璃效果*/
.filter {
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

/*毛玻璃效果*/
.cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.hidden {
    display: none !important;

}
</style>
</head>

<body tapmode="">
<div id='slide' class='swipe'>
    <div class='swipe-wrap' id="banner-content">


    </div>

</div>
<ul class="content listView">
    <!--<li><a class="item">
        <div class="img"><img src="../image/l19.jpg"></div>
        <div class="text"><p class="title">消防员:当时就想让孩子活下来</p>

            <p class="subTitle">
                222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><span
                    class="newsTips">098999</span></div>
    </a></li>
    <li><a class="item">
        <div class="img"><img src="../image/l19.jpg"></div>
        <div class="text"><p class="title">消防员:当时就想让孩子活下来</p>

            <p class="subTitle">
                222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p><span
                    class="newsTips">098999</span></div>
    </a></li>-->
</ul>
<section class="imgGroup">
    <!--<div class="img-lable">AAAAAAAAAAAA<span class="img-lable-newsTips">222跟贴</span></div>
    <ul class="imgs">
        <li onclick="" tapmode=""><img src="../image/l32.jpg"></li>
        <li onclick="" tapmode=""><img src="../image/l32.jpg"></li>
        <li onclick="" tapmode=""><img src="../image/l32.jpg"></li>
    </ul>-->
</section>
<section class="topic">
    <!--<div class="img-lable">马修麦康纳：很多戏让我绝望</div>
    <img src="../image/t1.jpg">

    <div class="after-img-lable">
        约翰唐尼因在华服刑20年，被CIA赞为忠诚楷模
        <span class="img-lable-newsTips fortag">1427跟贴</span>
        <span class="img-lable-newsTips tag blue-tag">独家</span>
    </div>-->
</section>

<section id="moreData">

</section>
<div class="cover hidden" onclick="clearFilter()" tapmode="">

</div>
<script>
    var page= 0,limit=10;
    apiready = function () {
        render();
        setRefreshHeader();
        api.addEventListener({name: 'scrolltobottom'}, function (ret, err) {
            page++;
            renderList(listCallBack, 'moreData');
            renderImgGroup(imgGroupCallBack, 'moreData');
            api.parseTapmode();
        });
    };

    function render() {
        api.showProgress();
        renderBanner(bannerCallBack);
        renderList(listCallBack);
        renderTopic(topicCallBack);
        renderImgGroup(imgGroupCallBack);
        api.parseTapmode();
        api.hideProgress();
    }

    function renderTopic(callBack, dom) {
        var pointer = {_class: 'nav', id: api.pageParam.id, column: 'topic'}
        var model = api.require('model');
        var query = api.require('query');
        query.createQuery(function (ret, err) {
            if (ret && ret.qid) {
                query.include({
                    qid: ret.qid,
                    column: pointer.column
                });
                query.whereEqual({
                    qid: ret.qid,
                    column: 'id',
                    value: pointer.id
                });
                //分页查询
                /*query.skip({
                    qid: ret.qid,
                    value:page*limit
                });
                query.limit({
                    qid: ret.qid,
                    value:limit
                });*/
                model.findAll({class: pointer._class, qid: ret.qid}, function (ret, err) {
                    if (ret) {
                        callBack(ret, dom)
                    } else {
                        api.toast({msg: err.msg, location: 'middle'})
                    }
                });
            } else {
                alert(err)
            }
        });
    }

    function renderImgGroup(callBack, dom) {
        var relation = {_class: 'nav', id: api.pageParam.id, column: 'imgGroup'};
        _relationFindAll(relation, callBack, dom)
    }
    function renderBanner(callBack) {
        var relation = {_class: 'nav', id: api.pageParam.id, column: 'banner'};
        _relationFindAll(relation, callBack)
    }


    function renderList(callBack, dom) {
        var relation = {_class: 'nav', id: api.pageParam.id, column: 'list'};
        _relationFindAll(relation, callBack, dom)
    }

    function _relationFindAll(relation, callBack, dom) {
        var relation_m = api.require('relation');
        relation_m.findAll({
            class: relation._class,
            id: relation.id,
            column: relation.column
        }, function (ret, err) {
            if (ret) {
                callBack(ret, dom);
            } else {
                api.toast({msg: err.msg, location: 'middle'})
            }
        });
    }

    function topicCallBack(ret, dom) {
        var topic = ret[0].topic, title = topic.title, imgUrl = topic.img.url, digest = topic.digest, replyCount = topic.replyCount, TAG = topic.TAG;
        var topicHttml = '<div  class="img-lable">' + title + '</div><div tapmode="" onclick="toDetail()" style="width: 100%"> <img src="' + imgUrl + '"></div><div class="after-img-lable">' + digest + '<span class="img-lable-newsTips fortag">' + replyCount + '跟贴</span><span class="img-lable-newsTips tag blue-tag">' + TAG + '</span> </div>';
        if (dom) {
            $("#" + dom).append('<section  class="topic">'+topicHttml+'</section>');
        } else {
            $(".topic").html(topicHttml);
        }
    }

    function imgGroupCallBack(ret, dom) {
        var imgGroupHtml = '';
        for (var i in ret) {
            var imgUrl1 = ret[i].img1.url, imgUrl2 = ret[i].img2.url, imgUrl3 = ret[i].img3.url, title = ret[i].title, replyCount = ret[i].replyCount;
            imgGroupHtml += '<div  class="img-lable">' + title + '<span class="img-lable-newsTips">' + replyCount + '跟贴</span></div><ul class="imgs" tapmode="" onclick="toDetail()"><li onclick="" tapmode=""><img src="' + imgUrl1 + '"></li><li onclick="" tapmode=""><img src="' + imgUrl2 + '"></li><li onclick="" tapmode=""><img src="' + imgUrl3 + '"></li></ul>';
        }
        if (dom) {
            $("#" + dom).append('<section class="imgGroup">'+imgGroupHtml+'</section>');
        } else {
            $(".imgGroup").html(imgGroupHtml);
        }
    }
    function listCallBack(ret, dom) {
        var listHtml = '';
        for (var i in ret) {
            var imgUrl = ret[i].img.url, title = ret[i].title, subTitle = ret[i].subTitle, replyCount = ret[i].replyCount;
            listHtml += '<li tapmode="" onclick="toDetail()"><div class="item"><div class="img"><img src="' + imgUrl + '"></div><div class="text"><p class="title">' + title + '</p><p class="subTitle">' + subTitle + '</p><span class="newsTips">' + replyCount + '</span></div></div></li>';
        }
        if (dom) {
            $("#" + dom).append('<ul class="content listView">'+listHtml+'</ul>');
        } else {
            $(".listView").html(listHtml);
        }

    }

    function bannerCallBack(ret) {

        /*var bannerHtml = '', pointerHtml = '';
        for (var i in ret) {
            var url = ret[i].img.url, title = ret[i].title, active = i == 0 ? 'active' : '';
            bannerHtml += '<div data-title="' + title + '" tapmode="" onclick="toDetail()"><img src="' + url + '"/></div>';
            pointerHtml += '<div class="' + active + '"></div>';
        }
        ;
        $("#banner-content").html(bannerHtml);
        $("#pointer").html(pointerHtml);
        initSlide(ret.length);
        $("#imgTitle").html(ret[0].title);*/

        var imgsArr=[],titleArr=[];
        for (var i in ret) {
            imgsArr.push(ret[i].img.url);
            titleArr.push(ret[i].title);
        }
        var scrollPicture = api.require('scrollPicture');
        scrollPicture.open({
            x:0,
            y:0,
            w:api.winWidth,
            h:210,
            intervalTime:10,
            placeholderImg: 'widget://image/default.png',
            subtitle:{
                titles:titleArr,
                bgColor:'#ffffff',
                color:'#000000',
                size:14
            },
            paths: imgsArr,
            control: {
                activeColor:'#000000',
                inactiveColor:'#9B9B9B',
                alignment:'right'
            },
            fixed:false,
            fixedOn:'frame_'+api.pageParam.index
        }, function (ret, err) {
            if (ret.status) {
                toDetail();
            } else {

            }
        });

    }



    function setRefreshHeader() {
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            render();
            api.refreshHeaderLoadDone();
        });
    }
    function addFilter() {
        try {
            $("body").addClass('filter');
            $(".cover").removeClass('hidden');
        } catch (e) {
            alert(e)
        }

    }
    function clearFilter() {
        if ($("body").hasClass('filter')) {
            api.execScript({name: 'root', script: 'closeMenu()'});
            _clearFilter();
        }
    }
    function _clearFilter() {
        $("body").removeClass('filter');
        $(".cover").addClass('hidden');
    }

    function toDetail() {
        api.openWin({
            name: 'detail',
            url: 'win_newsDetail.html'
        })
    }

</script>
</body>
</html>